<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Netty-socketio 测试 demo</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="./socket.io.min.js"></script>
<style>
body {
    padding: 20px;
}
#console {
    height: 400px;
    overflow: auto;
}
.username-msg {
    color: orange;
}
.connect-msg {
    color: green;
}
.disconnect-msg {
    color: red;
}
.send-msg {
    color: #888
}
</style>
</head>
<body>
    <h1>Netty-socketio 测试 demo</h1>
    <br />
    <div id="console" class="well"></div>
    <form class="well form-inline" onsubmit="return false;">
        <input id="msg" class="input-xlarge" type="text" placeholder="发送内容" />
        <button type="button" onClick="sendMessage()" class="btn">发送</button>
        <button type="button" onClick="sendDisconnect()" class="btn">断开</button>
    </form>
</body>
<script type="text/javascript">
    var socket = io.connect('http://192.168.110.130:9023');
    socket.on('connect',function() {
        output('<span class="connect-msg">客户端连接服务器success!</span>');
    });
    
    socket.on('message', function(data) {
        output('<span class="username-msg">' + data + ' </span>');
    });
    
    socket.on('disconnect',function() {
        output('<span class="disconnect-msg">客户端断开连接! </span>');
    });
    
    function sendDisconnect() {
        socket.disconnect();
    }
    
    function sendMessage() {
        var message = $('#msg').val();
        $('#msg').val('');
        // alert(message);
        socket.emit('message', message);
        // alert("send end");
    }
    
    function output(message) {
        var element = $("<div>" + message + "</div>");
        $('#console').prepend(element);
    }
</script>
</html>